<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="18">
        <div class="first-title">

        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="18">
        <el-row class="_first">

            <el-col :span="2" class="_left">
              <div class="_title">
                <div class="_icon icon-cangchu">
                  <svg-icon icon-class="peoples" class-name="card-panel-icon" />
                </div>
                <div class="_txt">仓储</div>
              </div>
            </el-col>
          <transition name="bounceInLeft" appear>
            <el-col :span="22" class="_transport">
              <div class="_group">
                <div class="_step _middle _updown" @click="receiveCheckIn">收货登记</div>
              </div>
              <div class="_line">
                <i class="my-icon icon-line"></i>
              </div>
              <div class="_group">
                <div class="_step" @click="putaway">上架管理</div>
              </div>
              <div class="_line">
                <i class="my-icon icon-line"></i>
              </div>
              <div class="_group">
                <div class="_step" @click="rkgl">入库管理</div>
              </div>
              <div class="_line">
                <i class="my-icon icon-line"></i>
              </div>
              <div class="_group" style="width:12%;height:237px;border: 1px dashed  #CAE5FF;display:flex;align-items: center;justify-content: center;flex-direction: column;">
                <div class="_step _placeOrder" @click="counting">盘点管理</div>
                <div class="_step _middle" @click="inventory">库存管理</div>
                <div class="_step _top" @click="move">移位管理</div>
              </div>
              <div class="_line">
                <i class="my-icon icon-line"></i>
              </div>
              <div class="_group">
                <div class="_step" @click="delivery">库存分配</div>
              </div>
              <div class="_line">
                <i class="my-icon icon-line"></i>
              </div>
              <div class="_group">
                <div class="_step" @click="picking">拣货管理</div>
              </div>

              <div class="_line">
                <i class="my-icon icon-line"></i>
              </div>
              <div class="_group">
                <div class="_step" @click="outbound">出库管理</div>
              </div>
            </el-col>
          </transition>
        </el-row>
      </el-col>

        <!-- <a href="http://www.58arpa.com/" target="_blank"> -->
      <el-col :span="6" style="background:#0c2034">
        <div class="amap-page-container">
            <div :style="{width:'100%',height:'300px',}" id="chart_map" class="chart_map" ref="chart_map">
              <!-- <div id="chart_map" style="width:100%;height:778px;"></div>
              <el-amap vid="amapDemo" :zoom="zoom" class="amap-demo" :center="center">
                <el-amap-marker vid="component-marker" :position="componentMarker.position" :content-render="componentMarker.contentRender" ></el-amap-marker>
                <el-amap-marker v-for="(marker, index) in markers"  :position="marker.position" :events="marker.events" :visible="marker.visible" :draggable="marker.draggable" :vid="index"></el-amap-marker>
              </el-amap> -->
        <!-- 一定要添加:content="marker.content"********* -->
            </div>
          </div>
      </el-col>
        <!-- </a> -->
    </el-row>
  </div>
</template>

<script>
const exampleComponents = {
  props: ['text'],
  template: `<div>text from  parent: {{text}}</div>`
}
import Vue from "vue";
import VueAMap from 'vue-amap'
Vue.use(VueAMap)
  export default {
    data(){
      let self = this;
      const center = [121.59996, 31.197646];
      return {
      plugin: [{
        enableHighAccuracy: true,//是否使用高精度定位，默认:true
        timeout: 100,          //超过10秒后停止定位，默认：无穷大
        maximumAge: 0,           //定位结果缓存0毫秒，默认：0
        convert: true,           //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
        showButton: true,        //显示定位按钮，默认：true
        buttonPosition: 'RB',    //定位按钮停靠位置，默认：'LB'，左下角
        showMarker: true,        //定位成功后在定位到的位置显示点标记，默认：true
        showCircle: true,        //定位成功后用圆圈表示定位精度范围，默认：true
        panToLocation: true,     //定位成功后将定位到的位置作为地图中心点，默认：true
        zoomToAccuracy:true,//定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：f
        extensions:'all',
        pName: 'Geolocation',
        events: {
          init(o) {
            // o 是高德地图定位插件实例
            o.getCurrentPosition((status, result) => {
              console.log(result)
              if (result && result.position) {
                self.lng = result.position.lng;
                self.lat = result.position.lat;
                self.center = [self.lng, self.lat];
                self.loaded = true;
                self.$nextTick();
              }
            });
          }
        }
      }],
          count: 1,
          slotStyle: {
            padding: '2px 8px',
            background: '#eee',
            color: '#333',
            border: '1px solid #aaa'
          },
          zoom: 2,
          center: [121.5273285, 31.21515044],
          lng: 0,
      lat: 0,
      loaded: false,
      markers: [
        {
          position: [121.5273285, 31.21515044],
          events: {
            click: () => {
              alert('click marker');
            },
            dragend: (e) => {
              console.log('---event---: dragend')
              this.markers[0].position = [e.lnglat.lng, e.lnglat.lat];
            }
          },
          visible: true,
          draggable: false,
          template: '<span>1</span>',
        }
      ],
          renderMarker: {
            position: [121.5273285, 31.21715058],
            contentRender: (h, instance) => {
              // if use jsx you can write in this
              // return <div style={{background: '#80cbc4', whiteSpace: 'nowrap', border: 'solid #ddd 1px', color: '#f00'}} onClick={() => ...}>marker inner text</div>
              return h(
                'div',
                {
                  style: {background: '#80cbc4', whiteSpace: 'nowrap', border: 'solid #ddd 1px', color: '#f00'},
                  on: {
                    click: () => {
                      const position = this.renderMarker.position;
                      this.renderMarker.position = [position[0] + 0.002, position[1] - 0.002];
                    }
                  }
                },
                ['marker inner text']
              )
            }
          },
          componentMarker: {
            position: [121.5273285, 31.21315058],
            contentRender: (h, instance) => h(exampleComponents,{style: {backgroundColor: '#fff'}, props: {text: 'father is here'}}, ['xxxxxxx'])
          },
          slotMarker: {
            position: [121.5073285, 31.21715058]
          }
    }
  },
    created() {

    },
    mounted() {
      this.echart_map()
    },

    methods: {
      handleJump() {
        window.open('http://119.3.251.8/gaikuo', '_blank')
      },
    // echart_map中国地图
    echart_map() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = this.$echarts.init(this.$refs.chart_map);

        var data = []
        /*获取地图数据*/
        myChart.showLoading();
        var mapFeatures = "/data/china.json"
        myChart.hideLoading();
        var geoCoordMap = {
            '福州': [119.4543, 25.9222],
            '长春': [125.8154, 44.2584],
            '重庆': [107.7539, 30.1904],
            '西安': [109.1162, 34.2004],
            '成都': [103.9526, 30.7617],
            '常州': [119.4543, 31.5582],
            '北京': [116.4551, 40.2539],
            '北海': [109.314, 21.6211],
            '海口': [110.3893, 19.8516],
            // '临沂': [118.334791, 35.124136],
            '上海': [121.40, 31.73],
            '内蒙古': [106.82, 39.67],
            '新疆': [87.504119, 43.856884],
            '云南': [100.090206, 23.970804],
            '拉萨': [90.942599, 29.620656],
            '青海': [91.381062, 35.066833]
        };

        var GZData = [
            [{
                name: ''
            }, {
                name: '福州',
                value: 95
            }],
            [{
                name: ''
            }, {
                name: '长春',
                value: 80
            }],

        ];

        var convertData = function (data) {
            var res = [];
            for (var i = 0; i < data.length; i++) {
                var dataItem = data[i];
                var fromCoord = geoCoordMap[dataItem[0].name];
                var toCoord = geoCoordMap[dataItem[1].name];
                if (fromCoord && toCoord) {
                    res.push({
                        fromName: dataItem[0].name,
                        toName: dataItem[1].name,
                        coords: [fromCoord, toCoord]
                    });
                }
            }
            return res;
        };

        var color = ['#c5f80e'];
        var series = [];
        [
            ['', GZData]
        ].forEach(function (item, i) {
            series.push({
                name: item[0],
                type: 'lines',
                zlevel: 2,
                symbol: ['none', 'arrow'],
                symbolSize: 10,
                effect: {
                    show: true,
                    period: 6,
                    trailLength: 0,
                    symbol: 'arrow',
                    symbolSize: 5
                },
                lineStyle: {
                    normal: {
                        color: color[i],
                        width: 1,
                        opacity: 0.6,
                        curveness: 0.2
                    }
                },
                data: convertData(item[1])
            }, {
                name: item[0],
                type: 'effectScatter',
                coordinateSystem: 'geo',
                zlevel: 2,
                rippleEffect: {
                    brushType: 'stroke'
                },
                label: {
                    normal: {
                        show: true,
                        position: 'right',
                        formatter: '{b}'
                    }
                },
                symbolSize: function (val) {
                    return val[2] / 8;
                },
                itemStyle: {
                    normal: {
                        color: color[i]
                    }
                },
                data: item[1].map(function (dataItem) {
                    return {
                        name: dataItem[1].name,
                        value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
                    };
                })
            });
        });

        let option = {
            tooltip: {
              trigger: 'item',
              formatter:function(val){
                  return val.data.value[0]+','+val.data.value[1];
              }
            },
            geo: {
                map: 'china',
                label: {
                    emphasis: {
                        show: false
                    }
                },
                roam: true,
                itemStyle: {
                    normal: {
                        //          	color: '#ddd',
                        borderColor: 'rgba(147, 235, 248, 1)',
                        borderWidth: 1,
                        areaColor: {
                            type: 'radial',
                            x: 0.5,
                            y: 0.5,
                            r: 0.8,
                            colorStops: [{
                                offset: 0,
                                color: 'rgba(175,238,238, 0)' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: 'rgba(	47,79,79, .1)' // 100% 处的颜色
                            }],
                            globalCoord: false // 缺省为 false
                        },
                        shadowColor: 'rgba(128, 217, 248, 1)',
                        // shadowColor: 'rgba(255, 255, 255, 1)',
                        shadowOffsetX: -2,
                        shadowOffsetY: 2,
                        shadowBlur: 10
                    },
                    emphasis: {
                        areaColor: '#389BB7',
                        borderWidth: 0
                    }
                }
            },
            series: series
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });

    },

		// 收货登记
		receiveCheckIn(){
			this.$router.push({
				path:'/inbound/reciveList'
			})
		},
		// 上架管理
		putaway(){
			this.$router.push({
				path:'/inbound/putaway'
			})
		},
		// 入库管理
		rkgl(){
			this.$router.push({
				path:'/inbound/rkgl'
			})
		},
		// 盘点管理
		counting(){
			this.$router.push({
				path:'/kngl/counting'
			})
		},
		  // 库存管理
      inventory(){
        this.$router.push({
          path:'/kngl/inventory'
        })
      },
		  // 移位管理
      move(){
        this.$router.push({
          path:'/kngl/move'
        })
      },
		  // 库存分配
      delivery(){
        this.$router.push({
          path:'/wms/delivery'
        })
      },
		  // 拣货管理
      picking(){
        this.$router.push({
          path:'/wms/picking'
        })
      },
		  // 出库管理
      outbound(){
        this.$router.push({
          path:'/wms/outbound'
        })
      },

    }
  }
</script>

<style lang="scss" type="text/scss" scoped>
  // 动画效果
   .bounceInLeft-enter-active, .bounceInLeft-leave-active {
     transition: all 1s ease;
   }
   .bounceInLeft-enter, .bounceInLeft-leave-to{
     opacity: 0;
     transform: translateX(-30px);
   }

  .first-title {
    position: relative;
    padding-left: 14px;
    font-size: 16px;
    margin-top: 20px;
    margin-bottom: 8px;
    // height: 50px;
    border-bottom: none;
    i {
      margin-right: 8px;
    }
  }
  .first-title::before{
    content: '';
    height: 15px;
    width: 4px;
    background-color: #FF7F21;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }
  ._website {
    width: 100%;
    height: 300px;
    position: relative;
    // background-image: url('../../../../assets/home_images/cpgw.png');
    display: flex;
    align-items: center;
    justify-content: center;

    ._txt {
      color: #666666;
      font-size: 14px;
      font-weight: 600;
      padding-left: 20px;
      position: absolute;
      top: 30px;
      left: 0;
      z-index: 9;
    }

    ._websiteImg {
      width: 100%;
      max-width: 300px;
    }
  }
    ._first{
      height: 300px;
      padding:0 50px;
      box-sizing: border-box;
      background-color: #FFFFFF;
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }
    ._left{
      // margin-right: 62px;
      display: flex;
      align-items: flex-start;
      flex-direction: column;
      ._title{
        font-size: 16px;
        color: #333333;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        ._icon{
          margin-right: 9px;
        }
      }
      ._verticalLine{
        width: 1px;
        height: 60px;
        background: #D6DFEC;
        margin: 2px 0;
        margin-left: 8px;
      }
    }
    ._transport{
      display: flex;
      align-items: center;
      justify-content: flex-start;
      ._group{
        position: relative;
        .icon-left_top{
          width: 102px;
          height: 56px;
          position: absolute;
          left: 108px;
          top: 25px;
          z-index: 9;
        }
        .icon-left_bottom{
          width: 102px;
          height: 56px;
          position: absolute;
          left: 108px;
          bottom: 25px;
          z-index: 9;
        }
        .icon-right_top{
          width: 102px;
          height: 56px;
          position: absolute;
          right: 108px;
          top: 25px;
          z-index: 9;
        }
        .icon-right_bottom{
          width: 102px;
          height: 56px;
          position: absolute;
          right: 108px;
          bottom: 25px;
          z-index: 9;
        }
      }
      ._step{
        width: 94px;
        height: 45px;
        // border-radius: 20px;
        text-align: center;
        line-height: 40px;
        font-size: 16px;
        white-space: nowrap;
        cursor: pointer;
        background-image: url('../../../../assets/home_images/beijing.png');
        // background: #43CFB3;
        color: #FFFFFF;
        -webkit-appearance: none;
        text-align: center;
        box-sizing: border-box;
        outline: none;
        position: relative;
        z-index: 10;
        transition: all .3s linear;
      }
      ._middle{
        margin: 38px 0;
      }
      .icon-line{
        margin: 0px 10px 0px 10px;
      }
    }
  .title {
  font-size: 16px;
}
@media screen and (max-width: 1680px) {
  ._first{
    padding: 0 42px;
  }
      ._left{
        // margin-right: 53px;
        ._verticalLine{
          height: 50px;
        }
        ._title{
          font-size: 13px;
          color: #333333;
        }
      }
      ._transport{
        ._group{
          position: relative;
          .icon-left_top{
            width: 89px;
            height: 49px;
            position: absolute;
            left: 95px;
            top: 22px;
            z-index: 9;
          }
          .icon-left_bottom{
            width: 89px;
            height: 49px;
            position: absolute;
            left: 95px;
            bottom: 22px;
            z-index: 9;
          }
          .icon-right_top{
            width: 89px;
            height: 49px;
            position: absolute;
            right: 95px;
            top: 22px;
            z-index: 9;
          }
          .icon-right_bottom{
            width: 89px;
            height: 49px;
            position: absolute;
            right: 95px;
            bottom: 22px;
            z-index: 9;
          }
          ._step{
            width: 82px;
            height: 40px;
            // border-radius: 18px;
            text-align: center;
            line-height: 35px;
            font-size: 14px;
          }
          ._middle{
            margin: 32px 0;
          }

        }
      }
  }
  @media screen and (max-width: 1520px) {
    ._first{
      padding: 0 30px;
    }
        ._left{
          // margin-right: 53px;
          ._verticalLine{
            height: 42px;
          }
          ._title{
            font-size: 13px;
            color: #333333;
          }
        }
        ._transport{
          ._group{
            position: relative;
            .icon-left_top{
              width: 80px;
              height: 44px;
              position: absolute;
              left: 85px;
              top: 20px;
              z-index: 9;
            }
            .icon-left_bottom{
              width: 80px;
              height: 44px;
              position: absolute;
              left: 85px;
              bottom: 20px;
              z-index: 9;
            }
            .icon-right_top{
              width: 80px;
              height: 44px;
              position: absolute;
              right: 85px;
              top: 20px;
              z-index: 9;
            }
            .icon-right_bottom{
              width: 80px;
              height: 44px;
              position: absolute;
              right: 85px;
              bottom: 20px;
              z-index: 9;
            }
            ._step{
              width: 74px;
              height: 35px;
              text-align: center;
              line-height: 32px;
              font-size: 13px;
            }
            ._middle{
              margin: 30px 0;
            }
          }
          .icon-line{
            width: 24px;
            height: 2px;
          }
        }
    }
    @media screen and (max-width: 1440px) {
      ._first{
        padding: 0 16px;
      }
   }
</style>
